<template>
	<view class="page" style="background: #EEE;">
		<view class="my_padding">
			<view class="prod_img">
				<image :src="weburl + detail.img" mode="widthFix"></image>
			</view> 
			<view class="tab-bar">
				<view class="info_bg"></view>
						 
				<uni-grid :column="3" :showBorder='false'  :highlight="false" style="height:80px; padding-top: 30rpx;">
					<uni-grid-item style="height:80px; width: 31vw;">
						<view class="grid-item-box" style="padding:2px 0;text-align: center;">
							<view class="number">{{ detail.day }} 天</view>
							<text class="text">期限</text>
						</view>
					</uni-grid-item>
					<uni-grid-item style="height:80px; width: 31vw;">
						<view class="grid-item-box" style="padding:2px 0;text-align: center;">
							<view class="number">￥{{ detail.min }}</view>
							<text class="text">价格</text>
						</view>
					</uni-grid-item>
					<uni-grid-item style="height:80px; width: 31vw;">
						<view class="grid-item-box" style="padding:2px 0;text-align: center;">
							<view class="number">￥{{ detail.min*detail.rate/100 }}/天</view>
							<text class="text">收益</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view style="margin-top:6px;width: 94vw;margin-left:3vw;">
				<!-- <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-with-animation>
					<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
						:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view>
				</scroll-view> -->
				<!-- 内容切换 -->
				<view class="contentinfo">
					<rich-text :nodes="detail.content" class="richText"></rich-text>
				</view>
				<!-- <view class="contenta" v-if="navIndex==1">
					<rich-text :nodes="detail.desc"></rich-text>
				</view> -->
			</view>
			
			<view class="invite_now" >
				<!-- <view class="chat" @click="navToUrl('/pages/help/kefuzx')"><image src="/static/images/person/icon_chat.png"></image><view>客服</view></view> -->
				<view class="order_part">
					<view class="order_try" @tap="showOrder(1)">体验签约</view>
					<view class="order_pay" @tap="showOrder(2)">余额签约</view>
				</view>
			<!-- <view class="collect" @click="toggleFavorite">
				<image :src="favorite === 1 ? '/static/images/person/icon_collected.png' : '/static/images/person/icon_collect.png'"></image>
				<view>{{ favorite === 1 ? '已收藏' : '收藏' }}</view>
			</view> -->


			</view>
		</view>
		
		<popup-bottom :show="showtrial" @close="showtrial=false" borderRadius='20'>
			<view class="contenta">
				<view class="order_tit">体验金签约</view>
				<view class="order_detail">
					<view class="det_item">
						<view class="det_l">产品价格</view>
						<view class="det_r"><span>{{ detail.min }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">产品总收益</view>
						<view class="det_r"><span>{{ parseFloat(detail.min*detail.rate/100 * detail.day).toFixed(2) }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">开始时间</view>
						<view class="det_r"><span>{{ detail.time }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">结束时间</view>
						<view class="det_r"><span>{{ detail.endtime }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">产品期限</view>
						<view class="det_r"><span>{{ detail.day }}</span> 天</view>
					</view>
				</view>
				
				<view class="canuse">
					<view class="canuse_l" @tap="readAgreement">《用户签约协议》</view>
					<view class="canuse_r">
						<view class="canuse_tit">可用体验金</view>
						<view class="canuse_money"><span>{{ usertrial }}</span></view>
					</view>
				</view>
				
				<view class="submit_order" @click="TrialOrderfinish()">确认签约</view>
			</view>
		</popup-bottom>
		<popup-bottom :show="showPopu" @close="showPopu=false" borderRadius='20'>
			<view class="contenta">
				<view class="order_tit">余额签约</view>
				<view class="order_detail">
					<view class="det_item">
						<view class="det_l">产品价格</view>
						<view class="det_r"><span>{{ detail.min }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">产品总收益</view>
						<view class="det_r"><span>{{ parseFloat(detail.min*detail.rate/100 * detail.day).toFixed(2) }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">开始时间</view>
						<view class="det_r"><span>{{ detail.time }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">结束时间</view>
						<view class="det_r"><span>{{ detail.endtime }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">产品期限</view>
						<view class="det_r"><span>{{ detail.day }}</span> 天</view>
					</view>
				</view>
				
				<view class="canuse">
					<view class="canuse_l" @tap="readAgreement">《用户签约协议》</view>
					<view class="canuse_r">
						<view class="canuse_tit">可用余额</view>
						<view class="canuse_money"><span>{{ usercoin }}</span></view>
					</view>
				</view>
				
				<view class="submit_order" @click="enterSuccess()">确认签约</view>
			</view>
		</popup-bottom>		
		<uni-popup ref="popupDialog" type="dialog">
			<uni-popup-dialog type="ok" :content="message" :show-cancel-button="false"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="popupAgreement" type="dialog">
			<uni-popup-rich-text type="ok" :content="detail.xieyi" :show-cancel-button="false" :title="agreement_title"
				@confirm="dialogConfirm"></uni-popup-rich-text>
		</uni-popup>
			    <view>
			        <payKeyboard v-if="showTrialOrderKeyBoard" title="超脑智算安全键盘" @success="TrialOrderfinish" @close="close"></payKeyboard>
			    </view>
			    <view>
			        <payKeyboard v-if="showKeyBoard" title="超脑智算安全键盘" @success="enterSuccess" @close="close"></payKeyboard>
			    </view>				

	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupRichText from '@/components/uni-popup/uni-popup-richtext.vue'
	import popupBottom from '@/components/uni-popup/uni-popup-bottom.vue'
	import validcode from "@/components/validCode/validCode.vue";
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	function debounce(func, wait) {
	  let timeout;
	  return function(...args) {
		const context = this;
		clearTimeout(timeout);
		timeout = setTimeout(() => func.apply(context, args), wait);
	  };
	}
	export default {
		components: {
			tabBar,
			uniPopupDialog,
			uniPopupRichText,
			popupBottom,
			validcode,
			payKeyboard
		},
		
		data() {
			return {
				id: 0,
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				list: [],
				detail:[],
				currentPage: '/pages/user/person',
				unit: '',
				modalName:null,
				favorite: 0,
				usercoin: 0,
				usertrial: 0,
				showTrialOrderKeyBoard: false,
				showKeyBoard: false,
				isSubmitting: false,
				detailList: [{
					name: '期限',
					number: '1'
				}, {
					name: '价格',
					number: '￥1500'
				}, {
					name: '收益',
					number: '￥12/天'
				}],
				navIndex: 0,
				tabBars: [{
					name: '项目介绍',
					id: 'jieshao'
				}, {
					name: '公司简介',
					id: 'jianjie'
				}],
				message: "签约成功，查看我的签约",
				showPopu: false,
				showtrial: false,
				agreement_title:'签约协议',
			};
		},

		onShow() {

			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if (currPage.$vm.bank_id){
				this.bank_id = currPage.$vm.bank_id;
				// this.loadData();
			}
		},
		onPullDownRefresh() {
			this.page = 1,
			this.lastPage = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			
			setTimeout(() => {
				this.getInvestDetail();
			}, 300);
		},		
		onLoad: function(option) {
			this.id = option.id
			this.getInvestDetail();
		},
		methods: {

			// 点击[取消] 关闭输入框 的回调
			close(){
				this.showKeyBoard = false
			},
			tabBarChange(val){
				this.navToUrl(this.detailList[val.detail.index].url)
			},
			toggleFavorite: function() {
				//console.log('确认按钮点击了');
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['code=' + this.id, 'token=' + info.token, 'timestamp=' + timestamp]);
					this.helper.req({
						api: "dofav",
						timestamp: timestamp,
						data: {
							code: this.id,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'POST',
					}).then(res => {
						if (res.data.message === "success") { // Assuming success response contains code 0
							// Toggle favorite state
							this.favorite = this.favorite === 1 ? 0 : 1;
							uni.showToast({
								title: this.favorite === 1 ? "收藏成功" : "已取消收藏",
								icon: "success"
							});
						} else {
							uni.showToast({
								title: "提交失败",
								icon: "none"
							});
						}
					}).catch(error => {
						uni.showToast({
							title: "网络错误，请稍后重试",
							icon: "none"
						});
					});
				}
			},


			getInvestDetail: function(){
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['code=' + this.id, 'token=' + info.token, 'timestamp=' +
						timestamp
					]);
					this.helper.req({
						api: "getInvestDetail",
						timestamp: timestamp,
						data: {
							code: this.id,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						var content = res.data.data.projectItem.content
						content = content.replace(/<img/gi,'<img style="max-width:100%;height:auto;margin:0 auto;display:block"')
						this.detail = res.data.data.projectItem
						this.detail.content = content
						this.usercoin = res.data.data.usercoin
						this.usertrial= res.data.data.usertrial
						this.favorite = res.data.data.favorite
						console.log('investDetail:', this.detail)
						uni.stopPullDownRefresh();
					})
				}
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			},

			showDialog(){
				this.toggleMessage()
			},
			toggleMessage() {
				this.$refs.popupDialog.open()
			},

			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			scroll: function(e) {
				console.log(e)
				this.scrollTop = e.detail.scrollTop
			},
			showOrder(type) {
				// 如果正在提交中，直接返回
				if (this.isSubmitting) return;
				
				console.log("type:", type);
				if (type == 1) {
					if (this.usertrial < this.detail.min) {
						this.message = '体验金不足'
						this.showModal(this.message)
					} else {
						this.showtrial = true
					}
				} else {
					if (this.usercoin < this.detail.min) {
						this.message = '余额不足'
						this.showModal(this.message)
						
					} else {
						this.showPopu = true
					}
				}
			},


			TrialOrderfinish(){
				// 如果正在提交中，直接返回
				if (this.isSubmitting) return;
				// 设置标志位为真
				this.isSubmitting = true;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['amount=' + parseFloat(this.detail.min), 'jiaxiquan_id=0', 'coupon_id=0', 'code=' + this.id, 'timestamp=' + timestamp, 'token=' + info.token]);
				this.helper.req({
					api: "createTrialOrder",
					timestamp: timestamp,
					data: { amount: parseFloat(this.detail.min), jiaxiquan_id: 0, coupon_id: 0, code: this.id, token: info.token },
					header: { sign: sign },
					method: 'POST',
				}).then(res => {
					var investid = res.data.data[0];
					if (investid) {
						 this.isSubmitting = false;
						uni.redirectTo({
							url: "/pages/invest/invest?code=" + investid
						});
					} else {
						this.isSubmitting = false;
						uni.redirectTo({
							url: "/pages/invest/orders"
						});
					}
				});
			},


			enterSuccess: function(e) {
				this.modalName = null;
				// 如果正在提交中，直接返回
				if (this.isSubmitting) return;
				// 设置标志位为真
				this.isSubmitting = true;
				console.log('提交金额',this.detail.min)
				this.showKeyBoard = false;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['amount='+parseFloat(this.detail.min),'jiaxiquan_id=0','coupon_id=0','code='+this.id,'timestamp='+timestamp,'token='+info.token]);
				this.helper.req({
					api:"createInvestOrder",
					timestamp:timestamp,
					data:{amount: parseFloat(this.detail.min),jiaxiquan_id: 0,coupon_id: 0,code:this.id,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					var investid = res.data.data[0]
					if (investid){
						this.isSubmitting = false;
						uni.redirectTo({
							url: "/pages/invest/invest?code="+investid
						})
					}else{
						this.isSubmitting = false;
						uni.redirectTo({
							url: "/pages/invest/orders"
						})
					}
				})
			},
			hideModal: function() {
				this.modalName = null,
				this.isSubmit = !1
			},	
			showModal(message) {
				this.message = message;
				this.$refs.popupDialog.open();
			},								
			toggleMessage() {
				this.$refs.popupDialog.open()
			},
			dialogConfirm(done){
				done()
			},
			readAgreement: function(){
				this.showPopu = false
				this.showtrial = false
				this.toggleAgreement()
			},
			toggleAgreement() {
				this.$refs.popupAgreement.open()
			},
		},
	};
</script>

<style lang="scss">
	page {
		font-size: 3.46667vw;
		min-width: 325px;
		background: #dceafb;
		background-repeat: no-repeat;
		padding-bottom: 16px;
		background-size: cover;
	}
	
	.my_padding {
		background: #dceafb;
		height: 100%;

	}
	
	.tab-bar{
		width: 94vw;
		margin: 3vw;
		height: 152rpx;
		position: relative;
		.info_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: linear-gradient(to bottom, #a1c3ff, #4f8efd);
			 
			border-radius:10px;
		}
	}
	
	.invite_part{
		height: 200vw;
	}
	
	.prod_img{
		width: 100%;
		min-height: 300px;
		position: relative;
	}
	.prod_img:after {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		box-shadow: inset 0px -20px 20px 0px #dceafb;
	}
	.prod_img image{
		width: 100%;
		height: 100%;
		display: block;
	}
	.prod_title{
		margin-top: 2px;
		padding: 10px 16px;
		font-size: 17px;
		font-weight: bold;
		color:#fff;
		// background: #fff;
	}
	
	.invite_now{
		// line-height: 30px;
		padding: 6px 0;
		height: 180px;
		width: 100%;
		position: fixed;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 35px;
		/* #endif */
		left: 0;
		color:#333;
		//background-color: #fff;
		// background-color: #fea829;
		font-size: 14px;
		text-align: center;
	}
	.chat{
		position: absolute;
		top: 10px;
		left: 10px;
		width: 40px;
		height: 40px;
	}
	.chat image{
		width: 20px;
		height: 20px;
		margin-top:4px;
	}
	.order_part{
		position: absolute;
		//top: 10px;
		left: 15%;
		width: 70%;
		 
		color:#fff;
		border-radius: 20px;
		// padding: 4px 10px;
		line-height: 42px;
	}
	.order_try{
		font-size: 14px;
		width: 50%;
		float:left;
		text-align: center;
		border-radius:20px 0 0 20px;
		background: linear-gradient(to top, #ccfded, #70ebbe);
	}
	.order_pay{
		font-size: 14px;
		width: 50%;
		float: right;
		background: linear-gradient(to top, #a1c3ff, #4f8efd);
		/* background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%); */
		text-align: center;
		border-radius: 0 20px 20px 0;
		//border-radius: 20px;
	}
	.collect{
		position: absolute;
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
	}
	.collect image{
		width: 24px;
		height: 24px;
	}
	
	.grid-item-box text{
		line-height: 24px;
		display: inherit;
		font-size: 14px; 
		color:#fff;
	}
	.grid-item-box .number{
		font-size: 15px;
		 font-weight: bold;
		color: #fff;
		line-height: 4vw;
		// height: 8vw;
		padding: 1.5vw 0;
		font-weight: 30rpx;
		border-radius: 4vw;
	}
	.contentinfo{
        width: 100%;
		min-height: 300px;
		padding: 10px;
		font-size: 14px;
		line-height: 24px;
		padding-bottom: 50px;		
	}	
    .contenta {
        width: 100%;
        min-height: 300px;
        padding: 10px 50rpx 50rpx 50rpx;
        background: #fff;
        font-size: 14px;
        // line-height: 24px;
    }
	.order_tit{
		line-height: 30px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		border-bottom: 1px solid #EEE;
		color: #4f8efd;
	}
	.order_detail{
		margin: 10px 0 0;
		padding: 10px;
		background-color: #ddeafd;
		font-size: 14px;
		height: 194px;
	}
	.det_item{
		width: 100%;
		line-height: 36px;
	}
	.det_l{
		font-size: 14px;
		width: 30%;
		float:left;
	}
	.det_r{
		font-size: 14px;
		width: 70%;
		float:right;
		text-align: right;
	}
	.det_r span{
		color:#333;
		font-weight: bold;
		font-size: 17px;
		// padding: 0 6px;
	}
	.canuse{
		width: 100%;
		height: 50px;
		margin-top: 14px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.canuse_l{
		 
	}
	.canuse_r{
		 
		display: flex;
		justify-content: space-between;
		position: relative;
		align-items: center;
	}
	.canuse_tit{
		margin-right: 10rpx;
	}
	.canuse_money{  
		color: #2190ff;
		font-size: 26px;
		padding-right: 4px; 
	}
	
	.submit_order{
		width: 100%;
		padding: 10px;
		background: linear-gradient(to bottom, #a1c3ff, #4f8efd);
		color: #fff;
		font-size: 15px;
		text-align: center;
		border-radius: 6px;
	}
 
    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
        color: #666;
    }
 
    .scroll-view-item_H {
        display: inline-block;
        width: 50%;
        /* height: 50rpx; */
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        padding: 6px 0;
    }
	.activite {
	    color: #000;
	    font-size: 15px;
	    font-weight: bold;
	    border-bottom: 2px solid #000;
	    /* background-color: aliceblue; */
	}
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    /deep/.uni-scroll-view::-webkit-scrollbar {
        display: none
    }
	
.richText img {
    min-width: 100%; /* 图片最大宽度为容器的100% */
    height: auto; /* 图片高度自动调整，保持宽高比 */
}
</style>
